<template>
  <div class="qingwu">
    <div class="admin_table_page_title">
      <a-button @click="$router.back()" class="float_right" icon="arrow-left"
        >返回</a-button
      >
      家政信息编辑
    </div>
    <div class="unline underm"></div>
    <div class="admin_form">
      <a-form-model :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
        <a-form-model-item label="名称">
          <a-input v-model="info.name" placeholder="请输入名称"></a-input>
        </a-form-model-item>
          <a-form-model-item label="图片">
              <a-upload
                  list-type="picture-card"
                  class="avatar-uploader"
                  :show-upload-list="false"
                  :action="$api.estateAdvsUploadThumb"
                  :data="{token:$getSession('token_type')}"
                  @change="upload"
              >
                  <img style="max-width:600px" v-if="info.image_url" :src="info.image_url" />
                  <div v-else>
                      <a-font v-if="!loading" type='iconplus' />
                      <a-icon v-else type="loading" />
                  </div>
              </a-upload>
              <p>建议尺寸（750*750）</p>
          </a-form-model-item>

        <a-form-item label="家教分类">
<!--            :default-value="default_property_id"-->
          <a-select @change="handleChange" v-model="default_property_id">
            <a-select-option
              :value="value.id"
              v-for="(value, index) in property_lists"
              :key="index"
            >
              {{ value.title }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-model-item label="省/市/区">
          <a-cascader
            :options="options"
            placeholder="请选择地址"
            :default-value="areas"
            @change="onChange"
          />
        </a-form-model-item>
        <a-form-model-item label="详细地址">
          <a-input
            v-model="info.address"
            placeholder="请输入详细地址"
          ></a-input>
        </a-form-model-item>

        <a-form-model-item label="联系方式">
          <a-input v-model="info.mobile" placeholder="请输入联系方式"></a-input>
        </a-form-model-item>
        <a-form-model-item label="基本介绍">
          <a-textarea
            :auto-size="{ minRows: 2, maxRows: 6 }"
            v-model="info.content"
          />
        </a-form-model-item>
        <a-form-model-item label="是否启用">
          <a-radio-group
            name="is_show"
            :value="info.is_show"
            @change="showChange"
          >
            <a-radio :value="1">是</a-radio>
            <a-radio :value="0">否</a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item :wrapper-col="{ span: 12, offset: 5 }">
          <a-button type="primary" @click="handleSubmit">提交</a-button>
        </a-form-model-item>
      </a-form-model>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      info: {
        is_show: 1,
      },
      id: 0,
      options: [],
      areas: [],
      property_lists: [],
      params: {
        page: 1,
        per_page: 3000,
        check: 1,
      },
      default_property_id: "请选择家政分类",
      cate_id: "",
    };
  },
  watch: {},
  computed: {},
  methods: {
    // 是否禁用
    showChange(e) {
      console.log(e.target.value);
      this.info.is_show = e.target.value;
    },
    handleSubmit() {
      // 验证代码处
      if (this.$isEmpty(this.info.name)) {
        return this.$message.error("名称不能为空");
      }
    if (this.$isEmpty(this.info.mobile)) {
        return this.$message.error("联系方式不能为空");
    }
      if (this.$isEmpty(this.cate_id)) {
        return this.$message.error("家政分类不能为空");
      }
      if (this.areas.length == 0) {
        return this.$message.error("请选择省市区");
      }
      if (this.$isEmpty(this.info.address)) {
        return this.$message.error("详细地址不能为空");
      }
      if (this.$isEmpty(this.info.mobile)) {
        return this.$message.error("联系方式不能为空");
      }

      let api = this.$apiHandle(this.$api.houseInfo, this.id);

      this.info.areas = this.areas;
      this.info.cate_id = this.cate_id;
      if (api.status) {
        this.$put(api.url, this.info).then((res) => {
          if (res.code == 200) {
            this.$message.success(res.msg);
            return this.$router.back();
          } else {
            return this.$message.error(res.msg);
          }
        });
      } else {
        this.$post(api.url, this.info).then((res) => {
          if (res.code == 200) {
            this.$message.success(res.msg);
            return this.$router.back();
          } else {
            return this.$message.error(res.msg);
          }
        });
      }
    },
    get_info() {
      this.$get(this.$api.houseInfo + "/" + this.id).then((res) => {
        this.info = res.data;
        this.areas[0] = res.data.province;
        this.areas[1] = res.data.city;
        this.areas[2] = res.data.area;
        this.default_property_id = res.data.cate_name;
        this.cate_id = res.data.cate_id;
        this.$forceUpdate()
        // console.log(this.default_property_id)
      });
    },
    // 获取城市列表
    get_area() {
      this.$get(this.$api.areasLists).then((res) => {
        this.options = res.data;
      });
    },
    // 省市区发生改变事件
    onChange(value, selectedOptions) {
      this.areas = value;
    },
    // 获取列表
    onload() {
      // 判断你是否是编辑
      if (!this.$isEmpty(this.$route.params.id)) {
        this.id = this.$route.params.id;
        this.get_info();
      }
    },
    // 获取家政列表
    getPropertyLists() {
      this.$get(this.$api.house_cate_list, { type: 1 }).then((res) => {
        this.property_lists = res.data;
      });
    },
    // 家政分类选择
    handleChange(value) {
      this.cate_id = value;
    },
    //上传
    upload(e){
        if(e.file.status == 'done'){
            this.loading = false;
            let rs = e.file.response;
            if(rs.code == 200){
                this.$set(this.info,'image_url',rs.data);
            }else{
                return this.$message.error(rs.msg);
            }
        }else{
            this.loading = true;
        }

    }
  },
  created() {
    this.get_area();
    this.onload();
    this.getPropertyLists();
  },
  mounted() {},
};
</script>
<style lang="scss" scoped>
</style>
